<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏轮播图</title>
     <style>
	 /* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.carousel {
    /* 使用 vw 和 vh 单位实现全屏显示 */
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.slide {
    /* 每个幻灯片占满整个视口 */
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: absolute;
  //  opacity: 0;
    transition: opacity 1s ease-in-out;
}

.p1{
	background-color:red;
}
.p2{
	background-color:blue;
}
.p3{
	background-color:green;
}
.slide.active {
    opacity: 1;
}
	  </style>
</head>

<body>
    <div class="carousel">
        <div class="slide p1" style="background-image: url('https://via.placeholder.com/1920x1080?text=Slide+1')"></div>
        <div class="slide p2" style="background-image: url('https://via.placeholder.com/1920x1080?text=Slide+2')"></div>
        <div class="slide p3" style="background-image: url('https://via.placeholder.com/1920x1080?text=Slide+3')"></div>
    </div>
</body>

</html>